<template>
	<view>
		<u-navbar :autoBack="true" leftIconColor="#ffffff" title="个人信息" :placeholder="true" bgColor="#3ACD90"
			:titleStyle="{ color: '#FFFFFF', fontSize: '30rpx' }"></u-navbar>
		
		<view style="background-color: #ffffff;" >
			<view class="mtl30">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
					<!-- <u-form-item labelWidth="150rpx" label="原密码"  borderBottom prop="originPassword">
						<view style="display: flex;">
							<u--input :type="originPassword" placeholder="请输入原密码"  v-model="model1.originPassword" border="none"></u--input>
							
							<u-icon :name="originShoweye" size="20" @click="originClick"></u-icon>
							
						</view>
						
					</u-form-item> -->
					<u-form-item labelWidth="150rpx" label="新密码"  borderBottom prop="newPassword">
						<view style="display: flex;">
							<u--input :type="newPassword" placeholder="请设置8-20位由数字字母组成的密码"  v-model="model1.newPassword" border="none" ></u--input>
							<u-icon :name="newShoweye" size="20" @click="newClick"></u-icon>
						</view>
						
					</u-form-item>
					<u-form-item labelWidth="150rpx" label="确认密码" borderBottom prop="confirmPassword">
						<view style="display: flex;">
							<u--input :type="confirmPassword" placeholder="请再次输入新密码" v-model="model1.confirmPassword" border="none"></u--input>
							<u-icon :name="confirmShoweye" size="20" @click="confirmClick"></u-icon>
						</view>
					</u-form-item>
				</u--form>
			</view>
		</view>
		
		<view style="margin-top: 100rpx;" class="mtlr30">
			<u-button @click="submit" type="primary" text="提交修改" color="#3ACD90" size="large"></u-button>
		</view>
		
	</view>
</template>
<style scoped>
	/deep/ .u-form-item__body__left{
		margin-left:40rpx;
		padding: 28rpx 0;
	}
	/deep/ .u-form-item__body__right{
		margin-right:40rpx
	}
</style>
<script>
	import {
		changePwd
	} from "@/common/apis/user.js"
	export default {
		data() {
			return {
				originShoweye: "eye-off",
				newShoweye:"eye-off",
				confirmShoweye:"eye-off",
				originPassword:"password",
				newPassword:"password",
				confirmPassword:"password",
				model1: {
					originPassword:"",
					newPassword:"",
					confirmPassword:""
				},
				rules: {
					// 'originPassword': {
					// 	type: 'string',
					// 	required: true,
					// 	min:8,
					// 	message: '请输入原密码',
					// 	trigger: ['blur']
					// },
					'newPassword': {
						type: 'string',
						required: true,
						min:6,
						message: '请输入新密码',
						trigger: ['blur']
					},
					'confirmPassword': {
						type: 'string',
						required: true,
						min:6,
						message: '请重复输入密码',
						trigger: ['blur'],
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							
							if(this.model1.newPassword == this.model1.confirmPassword){
								return true
							}else{
								return false
							}
							
						},
					},
				},

			};
		},
		methods: {
			submit() {
				

				this.$refs.uForm.validate().then(res => {
					console.log(res)
					uni.$u.toast('校验通过')
					changePwd({
						"password":this.model1.newPassword,
						"repassword":this.model1.confirmPassword
					}).then( res=>{
						console.log('res',res)
						uni.showToast({
							title: '提交成功',
							duration: 2000
						});
						this.$Router.pushTab({
							path: '/pages/tabBar/userInfo'
						})
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
				
			},
			originClick(){
				if( this.originShoweye == "eye-fill"  ){
					
					this.originShoweye = "eye-off"
					this.originPassword = "password"
				}else{
					this.originShoweye = "eye-fill"
					this.originPassword = "text"
				}

			},
			newClick(){
				if( this.newShoweye == "eye-fill"  ){
					this.newShoweye = "eye-off"
					this.newPassword = "password"
					
				}else{
					this.newShoweye = "eye-fill"
					this.newPassword = "text"
				}

			},
			confirmClick(){
				if( this.confirmShoweye == "eye-fill"  ){
					this.confirmShoweye = "eye-off"
					this.confirmPassword = "password"
				}else{
					this.confirmShoweye = "eye-fill"
					this.confirmPassword = "text"
				}

			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>